import React, { useEffect, useState } from 'react'
import { Modal, Skeleton, Image, Divider } from 'antd';
import { showComments } from '@/services/comments'
import { message } from 'antd';
import { GoogleSquareFilled } from '@ant-design/icons';
export default function OrderDetails(props) {
  const [initialValues, setInitialValues] = useState(undefined)
  const { isShowDetails, isDetailsVisible, actionRef, editId } = props
  useEffect(() => {
    const getOneComments = async () => {
      const res = await showComments(editId)
      console.log(res);
      setInitialValues({
        user: res.user,
        goods: res.goods,
        content:res.content,
        reply:res.reply
      })
    }
    getOneComments()
  }, [])
  return (
    <Modal title="订单详情" visible={isDetailsVisible}
      onCancel={() => isShowDetails(false)} footer={null} destroyOnClose={true}>
      {
        //只有在编辑的情况下，并且要显示的数据还没有返回，才显示骨架屏
        initialValues === undefined && editId !== undefined ? <Skeleton active={true} paragraph={{ rows: 2 }} /> :
          <div className="box">
           <Divider orientation="left">用户信息</Divider>
            <div className='user'>
              <p>
                <span className="username" style={{ marginRight: '100px' }}>姓名：{initialValues.user.name}</span>
                <span className="phone">邮箱：{initialValues.user.email}</span>
              </p>
            </div>
            <Divider orientation="left">评价商品</Divider>
            <div className="good">
              <div style={{ display: 'flex' }}>
                <Image src={initialValues.goods.cover_url} width={100} height={100} />
                <div className="info" style={{ marginLeft: '50px' }}>
                  <p className="good_name">{initialValues.goods.title}</p>
                  <p className="details">单价：{initialValues.goods.price}&emsp;</p>
                </div>
              </div>
            </div>
            <Divider orientation="left">评价内容</Divider>
            <p>{initialValues.content}</p>
            <Divider orientation="left">回复内容</Divider>
            <p>{initialValues.reply}</p>
          </div>
      }
    </Modal>
  )
}
